<template>
	<view class="container">
		<!-- left左侧列表 -->
		<view class="left">
			<!-- 循环遍历的 -->
			<!--  -->
			<view :class="isActive == index? 'left_list activeList' : 'left_list' " v-for="(item,index) in goodsList" @click="changeIndex(index)">
				<label for="">{{item.catename}}</label>
			</view>
		</view>
		<!-- right右侧详细分类商品 -->
		<view class="right">
			<!-- 每一个小类 -->
			<view class="right_list">
				<!-- 商品 -->
				<!-- 判断是否有children 有则遍历 -->
				<block v-if="goodsList.length>0">
					<view class="bottom">
						<view class="bottom_list" v-for="(item,index) in goodsList[isActive].children">
							<view>
								<image :src="item.img" alt="">
									<span>{{item.catename}}</span>
							</view>
						</view>
					</view>
					<view class="tes" v-if="goodsList[isActive].children.length==0">
						暂无数据
					</view>

				</block>

			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsList: [],
				isActive: 0
			}
		},
		onLoad() {
			this._getcates()
		},
		methods: {
			async _getcates() {
				let res = await this.$Api._getcates()
				// 改变图片格式
				res.data.list.map((item) => {
					item.children = item.children || []
					item.children.map((v, i) => {
						v.img = this.$baseUrl + v.img
					})
				})
				this.goodsList = res.data.list;
			},
			changeIndex(index) {
				this.isActive = index;
			}
		}
	}
</script>

<style>
	/* 导入外部的样式文件 */
	@import url("../../common/css/classify.css");

	/* 点击左侧导航，显示动态样式 */
	.activeList {
		border-left: 6rpx solid #f26b11;
		color: #f26b11;
	}

	.bottom {
		text-align: center;
		display: flex;
		flex-direction: row;
	}
</style>
